import { observer } from 'mobx-react-lite'
import { useTodoStore } from '../store/todoStore'

function TodoList() {
  const todoStore = useTodoStore()
  const { list, toggle } = todoStore
  return (
    <section className="main">
      <input className="toggle-all" type="checkbox" />
      <ul className="todo-list">
        {list.map(todo => (
          <li className={todo.completed ? 'completed' : ''} key={todo.taskName}>
            <div className="view">
              <input className="toggle" type="checkbox" checked={todo.completed} onChange={() => toggle(todo)}/>
              <label>{todo.taskName}</label>
              <button className="destroy"></button>
            </div>
            <input className="edit" />
          </li>
        ))}
      </ul>
    </section>
  )
}

export default observer(TodoList)
